import { SceneItemType } from '@/store/home'
import React, { useEffect, useState } from 'react'
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { vw } from '@/common/dimensions';
import LazyImage from '@/components/LazyImage';
import TopLeftIcon from '../TopLeftIcon';

export default function TempFaceSwap(props: { sceneItem: SceneItemType }) {
    let { sceneItem } = props;
    let { iconPath } = sceneItem
    let largeImage = (sceneItem && sceneItem.tpl_image_list &&  sceneItem.tpl_image_list[0].cat_image) as string ; // 假设第一张为大图
    let smallImages = sceneItem.tpl_image_list?.filter((item, ind) => ind > 0 && ind < 5).reduce((acc: { cat_image: string; }[][], cur, index) => {
        const targetIndex = index % 2; // 分配到两个子数组中
        acc[targetIndex].push(cur);
        return acc;
    }, Array.from(Array(2), () => []));

    return (
        <ScrollView showsVerticalScrollIndicator={false}>
            <View style={[styles.rowContainer, styles.headerContainer]}>
                <Text style={styles.title}>
                    {sceneItem.json_content.cn.title}
                </Text>
                <View style={[styles.rowContainer, { alignItems: 'center' , paddingHorizontal:2 * vw }]}>
                    <Text>全部</Text>
                    <Text style={styles.count}>
                        {sceneItem.tpl_image_list?.length}
                    </Text>
                    <Image style={{ width: 16, height: 16 }} source={require('@/assets/common/chevron-right.png')} />
                </View>
            </View>
            <View style={[styles.rowContainer, styles.mainContainer]}>
                <TopLeftIcon iconPath={iconPath} />
                <LazyImage
                    style={styles.largeImage}
                    uri={largeImage}
                    defaultSource={require('@/assets/common/perch.png')}
                />
                {smallImages?.map((item, index) => (
                    <View key={index} style={[styles.smallContainer]}>
                        {item.map((p) => (
                            <LazyImage
                                key={p.cat_image}
                                style={styles.smallImage}
                                uri={p.cat_image}
                                defaultSource={require('@/assets/common/perch.png')}
                            />
                        ))}
                    </View>
                ))}
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    rowContainer: {
        flexDirection: 'row',
    },
    headerContainer: {
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 6,
    },
    title: {
        fontSize: 14,
        fontWeight: 'bold',
        color:"#000"
    },
    count: {
        backgroundColor: '#ff7575',
        marginLeft: 8,
        color: '#fff',
        borderRadius: 8,
        width: 16,
        height: 16,
        textAlign: 'center',
        lineHeight: 16,
    },
    mainContainer: {
        width: 96 * vw,
        marginBottom: 16,
    },
    largeImage: {
        width: 46 * vw,
        height: 66 * vw,
        borderRadius: 24,
        marginRight: 2 * vw,
    },
    smallImage: {
        width: 22 * vw,
        height: 32 * vw,
        marginRight: 1 * vw,
        borderRadius: 12,
    },
    smallContainer: {
        justifyContent: 'space-between',
    },
    loadingIndicator: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        marginTop: -10,  // 微调 loading 位置
        marginLeft: -10, // 微调 loading 位置
    },
});